import { messages } from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import { Form, Button, Modal, Select, Radio, Spin } from 'antd'
import expenseService from 'containers/my-account/expense.service'
import MyAccountComp from 'containers/my-account/my-accountComp'
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;
class MyAccount extends React.Component {

  state = {
    agentFlag: false, //代理弹窗是否显示申请人
    agentModalFlag: false, // 是否显示代理弹窗
    forWhom: 'forMyself',
    agentOid: null, // 被代理人oid
    agentList: [],
    agentName: null
  };

  componentWillMount() {

  }
  componentDidMount() {
    expenseService.getAgentList().then((res) => {
      if(res.data && res.data.length > 0){
        this.setState({ agentList: res.data,agentModalFlag:true})
      }
      
    })
  }

  onOK = () => {
    const {forWhom} = this.state
    this.props.form.validateFieldsAndScroll((err, value) => {
      let agentName = '';
      this.state.agentList.forEach((item) => {
        if (item.userOID == value.agent) {
          agentName = item.fullName
          return
        }
      })
      if (!err) {
        this.setState({
          agentModalFlag: false,
          agentOid: forWhom == 'forOther' ? value.agent : null,
          agentName: forWhom == 'forOther' ? agentName : null,
        })
      }
    })
  }
  handleOnChooseForWhom = (e) => {
    this.props.form.setFieldsValue({agent: null});
      this.setState({
        forWhom: e.target.value,
        agentFlag:e.target.value == 'forOther'
      })
  }
  handleCancel = () => {
    this.setState({
      agentModalFlag: false
    })
  }
  render() {
    const { agentModalFlag, agentFlag, agentList, agentOid, agentName } = this.state;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14, offset: 1 },
    };
    return (
      <div className="full-height-page my-account">
        { !agentModalFlag && <MyAccountComp agentOid={agentOid} agentName={agentName}></MyAccountComp>}
        <Modal
          title={'代理人'}
          visible={agentModalFlag}
          width={600}
          footer={[
            <Button key="cancel" onClick={this.handleCancel}>{messages('common.cancel')}</Button>,
            <Button key="ok" type="primary" onClick={this.onOK}>{messages('common.ok')}</Button>
          ]}
          onCancel={this.handleCancel}
        >
          {/* <Spin spinning={loading}> */}
          <Form>
            {/** 代提报销单可以选择是“代上级”还是“代司机”，申请单和借款单的代提只有“代上级” */}
            <FormItem {...formItemLayout} label={'代谁'}>
              <RadioGroup onChange={(e) => this.handleOnChooseForWhom(e)}>
                <RadioButton value='forMyself'>代本人</RadioButton>
                <RadioButton value='forOther'>代他人</RadioButton>
              </RadioGroup>
            </FormItem>
            {agentFlag && <FormItem key={'agentID'} {...formItemLayout} label={messages('common.applicant') /*申请人*/}>
              {this.props.form.getFieldDecorator('agent', {
                rules: [{
                  required: true,
                  message: messages('common.please.select')/*请选择*/
                }]
              })(<Select
                // onChange={this.handleChangeJob}

                style={{ width: '100%' }}
                placeholder={messages('common.please.select')/*请选择*/}
              // getPopupContainer={triggerNode => triggerNode.parentNode}
              >
                {agentList.map(item => (
                  <Option
                    key={item.userOID}
                    style={{ whiteSpace: 'unset' }}
                    value={item.userOID}
                  >
                    {item.fullName}
                  </Option>
                ))}
              </Select>)}

            </FormItem>}

          </Form>
          {/* </Spin> */}
        </Modal>
      </div>
    )
  }
}
function mapStateToProps(state) {
  return {
    company: state.login.company,
    user: state.login.user,
    profile: state.login.profile
  }
}
export default connect(mapStateToProps)(Form.create()(MyAccount));
